<template>
<div>
<video-detail-dialog :id="id" ref="video_detail_dialog"/>  

<el-row>
  
  <el-col :span="4" v-for="(item, index) in lists" :key="index" :offset="1 ? 1 : 0" type="flex" justify="start"  @click.native="updateId( item.id)">

    <el-card :body-style="{ padding: '0 2 px' }" class="video-card"  >
            <img :src="item.pic" class="image">
    <div class="block">
      <span class="demonstration">默认</span>
  
   </div>
      <div >
        <span class="title">{{ item.title }}</span>
        <div class="bottom clearfix">
          <time class="time">下载时间: {{ item.created_at }}</time>
          <el-button type="text" class="button" @click="test()">已下载集数: {{ item.page_count }}</el-button>
        </div>
      </div>
    </el-card>

  </el-col>
</el-row>
</div>
</template>

<style>
.video-card{
  width: 320px;
  height: 250px;
}
  .image{
    height: 150px;
  }
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
  .title{
    white-space:nowrap;
   text-overflow:ellipsis;
   -webkit-text-overflow:ellipsis;
   overflow:hidden;
    display: block;
  }
</style>

<script>
  const GET_VIDEO_LIST_URL = 'bilibili/videoList'
  import VideoDetailDialog from '../../components/VideoDetailDialog'
  export default {
    data() {
      return {
        currentDate: new Date(),
        lists: '',
        id: 0
      };
    },
    components:{ VideoDetailDialog },
    mounted() {
      this.initList();
    },
    methods:{
      initList(){
        this.$fetch(GET_VIDEO_LIST_URL).then(val => this.lists = val.data)
      },
      updateId(id){
         this.id = id
         this.$refs.video_detail_dialog.showDiaLog()
      }
    }

  }
</script>
